import React, { Component } from 'react';
import _ from 'underscore';

import dispatcher from 'lib/dispatcher';
import Select from 'lib/components/Select.jsx';
import Loading from 'lib/components/Loading.jsx';

import { defaultEventIndicatorItems } from '../Constants.es6';

import ValueContainer from './ValueContainer.jsx';

class Values extends Loading {
  removeValueHandler(index) {
    dispatcher.dispatch({
      $type: 'remove_indicator_value',
      event: this.props.event,
      index
    });
  } // removeValueHandler

  changeValueHandler(index, item) {
    dispatcher.dispatch({
      $type: 'change_indicator_value',
      event: this.props.event,
      index,
      item
    });
  } // changeValueHandler

  addValueHandler() {
    let newItem = _.chain(this.list)
      .map(p => p.options)
      .flatten(true)
      .find(p => !p.disabled)
      .value();
    if (!newItem) {
      return;
    }

    dispatcher.dispatch({
      $type: 'add_indicator_value',
      event: this.props.event,
      newItem
    });
  } // addValueHandler

  getDataSource(data) {
    let items = _.chain(data.toJS().original[this.props.event].event)
                 .filter(p => p.is_measure && p.data_type === 'number')
                 .each(p => p.disabled = false)
                 .value();
    this.optionCount = items.length + 3;

    let customer = {
      group: '--',
      options: _.map(items, p => ({
                  label: p.cname,
                  value: `event.${p.event_name}.${p.name}`,
                  object: p
                }))
    };

    return [defaultEventIndicatorItems.toJS(), customer];
  } // getDataSource

  renderBody(data) {
    this.list = this.getDataSource(data);
    return (
      <div className="values">
        {
          this.props.indicators.map((item, index) => (
            <ValueContainer
              key={ index }
              { ...item }
              options={ this.list }
              onRemoving={ this.removeValueHandler.bind(this, index) }
              onChanged={ this.changeValueHandler.bind(this, index) }
              isLast={ this.props.indicators.length === (index + 1) } />
          ))
        }
        {
          this.optionCount !== this.props.indicators.length
            ? (
              <div className="btn-add" onClick={ this.addValueHandler.bind(this) }>
                <i className="iconfont">&#xe6be;</i>
              </div>
            ) : null
        }
      </div>
    );
  } // renderBody
}

export default class EventContainer extends Component {
  render() {
    return (
      <div className="indicator">
        <div className="condition-container">
          <Select
            className="condition"
            openDisabled={ true }
            options={ this.props.events }
            onChange={ this.props.onChanged }
            value={ _.find(this.props.events, p => p.value === this.props.event) } />
          <div className="spliter">的</div>
        </div>
        <Values
          store={ this.props.properties }
          defaultStyle={{ display: 'inline-block', width: '220px' }}
          height={ 22 }
          event={ this.props.event }
          indicators={ this.props.indicators } />
        {
          this.props.canRemove
            ? (
              <div className="iconfont remove" onClick={ this.props.onRemoving }>
                &#xe63d;
              </div>
            ) : null
        }
      </div>
    );
  } // render
}

EventContainer.defaultProps = {
  canRemove: true,
  onRemoving: null,
  onChanged: null
}
